<template>
  <div>
    <div class="node" v-has="{action: 'intercept:order:list', effect: 'move'}">
    <!-- 搜索 -->
    <div :class="[$style.search_box, $style.topSelect]">
      <SearchInput
        placeholder="订单编号"
        label="订单编号"
        style="margin-right:20px"
        :value="searchs.oid"
        :onChange="(val) => changeSearch('oid',val)"
        :onBlur="getRate"
      />
       <SearchInput
        placeholder="请输入"
        label="车牌号"
        style="margin-right:20px"
        :value="searchs.plate"
        :onChange="(val) => changeSearch('plate',val)"
        :onBlur="getRate"
      />
      <SearchInput
        placeholder="请输入"
        label="手机号"
        style="margin-right:20px"
        :value="searchs.phone"
        :onChange="(val) => changeSearch('phone',val)"
        :onBlur="getRate"
      />
      <SearchInput
        placeholder="请输入"
        label="充电枪编码"
        :value="searchs.sn"
        :onChange="(val) => changeSearch('gunSn',val)"
        :onBlur="getRate"
      />
     <div :class="$style.selectBox">
        <label>订单类型：</label>
        <el-select
          v-model="searchs.type"
          clearable
          @change="pageChange(1)"
          placeholder="请选择"
        >
        <el-option label="NFC订单" :value="1"></el-option>
        <el-option label="微信订单" :value="2"></el-option>
        <el-option label="集团客户订单" :value="3"></el-option>
        <el-option label="第三方平台订单" :value="4"></el-option>
        <el-option label="个人充电桩订单" :value="5"></el-option>
        </el-select>
      </div>
      
       <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
        <label>创建时间：</label>
        <el-date-picker
          v-model="searchs.appointmentTime"
          type="datetimerange"
          @change="timeChange('appointmentTime')"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
      <div :class="$style.selectBox">
            <label>请选择：</label>
            <el-select clearable v-model="searchs.siteId" @change="changeSite('siteId')" placeholder="站点">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="searchs.pileId" @change="changePile('pileId')" placeholder="选择桩">
              <el-option
                v-for="item in pileList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="searchs.gunId" @change="changeGun('gunId')" placeholder="选择枪">
              <el-option
                v-for="item in gunList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
       </div>
       <div :class="$style.searchBox1" style="margin-left: 20px">
         <el-button  size="small" plain  icon="el-icon-search" @click="()=>getRate()">查询</el-button>
        <!-- <el-button type="primary" @click="getRate">查询</el-button>         -->
      </div>
    </div>
    <Panel title="拦截订单">
      <!-- <div slot='ext' :class="$style.examine">
        <div class="adopt" @click="()=>editStore()">新增</div>
    </div> -->
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'intercept:order:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import requestService from "@/tools/requestExport";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
export default {
  name: "orderIntercept",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      tableData: [],
      company: [],
      operation: true,
      searchs:{
        component: 'intercept',
        type: '',
        thirdOid: '',
        siteId: '',
        pileId: '',
        plate: '',
        phone: '',
        gunId: '',
        sn:'',
        oid:'',
        api:'',
        state:'',
        appointmentTime: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()],
        appointmentTimeEnd:[],
      },
      endTime:'',
      beginTime:'',
      settBeginTime:'',
      settEndTime:'',
      siteList: [],
      pileList: [],
      gunList: [],
      pager: {
        component: 'intercept',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
    };
  },
  created() {
    this.endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : ''
    this.beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : ''
    this.settBeginTime =  ''
    this.settEndTime =  ''
    this.searchsFnc()
    this.getRate();
    this.iotSite()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "名字",
            type: "text",
            prop: "nick",
            align: "center"
          },
           {
            label: "车牌号",
            type: "text",
            prop: "plate",
            align: "center"
          },
           {
            label: "手机号",
            type: "text",
            prop: "phone",
            align: "center"
          },
          {
            label: "第三方订单号",
            type: "text",
            prop: "thirdOid",
            align: "center"
          },
           {
            label: "风控类型",
            type: "other",
            prop: "interceptType",
            align: "center",//风控类型:1黑名单,2未传车牌号,3高危车型,4账号异常,5设备异常,6参数错误 ,
            fnc: val =>  val == 1 ? "黑名单" : val == 2 ? "未传车牌号" : val == 3 ? "高危车型" : val == 4 ? "账号异常": val == 5 ? "设备异常":"参数错误"
          },
          {
            label: "错误信息",
            type: "text",
            prop: "interceptMsg",
            align: "center"
          },
          {
            label: "订单类型",
            type: "other",
            prop: "type",
            align: "center",//1 NFC订单 2微信订单 4第三方平台订单,5个人充电桩订单
            fnc: val =>  val == 1 ? "NFC订单" : val == 2 ? "微信订单" : val == 4 ? "第三方平台订单" : "个人充电桩订单"
          },
          {
            label: "站点",
            type: "text",
            prop: "siteName",
            align: "center"
          },
          {
            label: "枪名字",
            type: "text",
            prop: "gunName",
            align: "center"
          },
         {
            label: "枪号",
            type: "text",
            prop: "gunSn",
            align: "center"
          },
          {
            label: "时间",
            type: "text",
            prop: "createTime",
            align: "center"
          },
          // this.operation && {
          //   type: "operation",
          //   align: "center",
          //   label: "操作",
          //   width:180
          // }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs &&searchs.component == 'intercept'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'intercept'){
        this.pager = pager
      }
    },
    async getRate() {
      let endTime = this.endTime
      let beginTime = this.beginTime
      let type = this.type
      let state =  this.searchs.state
      let oid = this.searchs.oid, thirdOid = this.searchs.thirdOid
      let gunId = '', siteId = '', pileId = ''
      let sn = this.searchs.sn
      let phone = this.searchs.phone
      if(this.searchs.gunId){
        gunId = this.searchs.gunId
      }else{
        if(this.searchs.pileId){
          pileId = this.searchs.pileId
        }else {
          siteId = this.searchs.siteId
        }
      }
      
      if(oid || thirdOid){
        endTime = ''
        beginTime = ''
      }
      let page = this.pager.current
      let search = objectFilter({beginTime, endTime, state, oid, page, gunId, pileId, siteId, sn, type,phone})
      const res = await request({
        url: "/intercept/order/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    async changeSite(val){
      let url = '/iot/pile/select'
      let datas = {siteId:this.searchs.siteId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      this.searchs.gunId = ''
      this.searchs.pileId = ''
      this.pileList = res.list
      this.getRate()
    },
    async changePile(){
      let url = '/iot/pile/gun/all'
      let datas = {pile:this.searchs.pileId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      this.searchs.gunId = ''
      this.gunList = res.list
      this.getRate()
    },
    changeGun(){
      this.getRate()
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
   
    timeChange(val){
      if(val == 'appointmentTime'){
        this.endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : ''
        this.beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : ''
      }else{
        this.settBeginTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[0],"yyyy-MM-dd HH:mm:ss")) : ''
        this.settEndTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[1],"yyyy-MM-dd HH:mm:ss")) : ''
      }
      this.getRate()
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    //站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
       this.siteList = list
    },
  }
}
</script>
<style lang='scss' module>
.exportbox {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding-bottom: 5px;
    margin-bottom: 10px;
    .export {
    color: #FFF;
    background-color: #F56C6C;
    border-color: #F56C6C;
    border: 1px solid #F56C6C;
    border-radius: 5px;
    padding: 10px;
    margin-right: 20px;
}
}
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  // margin-bottom: 20px;
}
.selectBox {
  margin: 4px 10px;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>